<template>
  <view class="container">
    <!-- 个人信息卡片 -->
    <view class="profile-card">
      <view class="info-item">
        <uni-icons type="person" size="18" color="#0e70f0"></uni-icons>
        <text class="info-label">姓名:</text>
        <text class="info-value">{{userInfo.name}}</text>
      </view>
      
      <view class="info-item">
        <uni-icons type="person" size="18" color="#0e70f0"></uni-icons>
        <text class="info-label">性别:</text>
        <text class="info-value">{{userInfo.sex}}</text>
      </view>
      
      <view class="info-item">
        <uni-icons type="contact" size="18" color="#0e70f0"></uni-icons>
        <text class="info-label">专业:</text>
        <text class="info-value">{{userInfo.dept}}</text>
      </view>
      
      <view class="info-item">
        <uni-icons type="phone" size="18" color="#0e70f0"></uni-icons>
        <text class="info-label">电话:</text>
        <text class="info-value">{{userInfo.phone}}</text>
      </view>
      
      <view class="info-item">
        <uni-icons type="email" size="18" color="#0e70f0"></uni-icons>
        <text class="info-label">邮箱:</text>
        <text class="info-value">{{userInfo.email}}</text>
      </view>
    </view>
    
    <!-- 宿舍信息卡片 -->
    <view class="dorm-card">
      <view class="card-header">
        <text class="card-title">宿舍信息</text>
      </view>
      
      <view class="info-item">
        <uni-icons type="home" size="18" color="#07c160"></uni-icons>
        <text class="info-label">我的寝室:</text>
        <text class="info-value">{{dormInfo.dorid}}</text>
      </view>
      
      <view class="info-item">
        <uni-icons type="eye" size="18" color="#07c160"></uni-icons>
        <text class="info-label">照明电费:</text>
        <text :class="'info-value ' + (dormInfo.lightFee <= 0 ? 'red':'')">{{dormInfo.lightFee}} 元</text>
        <button class="mini-btn" @click="navigateToPay('light')">缴费</button>
      </view>
      
      <view class="info-item">
        <uni-icons type="settings" size="18" color="#07c160"></uni-icons>
        <text class="info-label">空调电费:</text>
        <text :class="'info-value ' + (dormInfo.acFee <= 0 ? 'red':'')">{{dormInfo.acFee}} 元</text>
        <button class="mini-btn" @click="navigateToPay('ac')">缴费</button>
      </view>
    </view>
  </view>
</template>

<script>
	import {getBill} from "@/utils/back.js"
  export default {
    data() {
      return {
        userInfo: {
          name: uni.getStorageSync("name"),
          sex: uni.getStorageSync("sex"),
          dept: uni.getStorageSync("dept"),
          phone: uni.getStorageSync("phoneNum"),
          email: uni.getStorageSync("email")
        },
        dormInfo: {
          dorid: uni.getStorageSync("dorid"),
          lightFee: 0,
          acFee: 0
        }
      }
    },
	async onShow() {
		let res = await getBill(this.dormInfo.dorid)
		// console.log(res);
		if(res){
			this.dormInfo.lightFee = res.billlight
			this.dormInfo.acFee = res.billaircon
		}else{
			uni.showToast({
				title:"网络连接超时",
				icon:"error"
			})
		}
	},
    methods: {
      navigateToPay(type) {
        uni.navigateTo({
          url: `/pages/payment/payment?dorid=${this.dormInfo.dorid}&type=${type}&amount=${type === 'light' ? this.dormInfo.lightFee : this.dormInfo.acFee}`
        });
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  .profile-card, .dorm-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }
  
  .info-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .info-label {
    font-size: 30rpx;
    color: #666;
    margin-left: 15rpx;
    width: 150rpx;
  }
  
  .info-value {
    font-size: 30rpx;
    color: #333;
    flex: 1;
  }
  
  .red{
  	color: red;
  }
  
  .card-header {
    margin-bottom: 30rpx;
  }
  
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 32rpx;
      background-color: #07c160;
      border-radius: 4rpx;
    }
  }
  
  .mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20rpx;
    height: 60rpx;
    font-size: 26rpx;
    color: #fff;
    background-color: #07c160;
    border-radius: 30rpx;
    margin-left: 20rpx;
    
    &::after {
      border: none;
    }
  }
</style>